<template>
  <div class="tcm-diagnosis-panel">
    <!-- 面板头部 -->
    <div class="panel-header">
      <h2>中医辨证诊断</h2>
      <el-button type="primary" @click="saveDiagnosis" :loading="isSaving">保存诊断</el-button>
    </div>

    <!-- 主内容区 -->
    <div class="panel-content">
      <!-- 患者基本信息 -->
      <div class="patient-info-section">
        <h3>患者信息</h3>
        <el-descriptions :column="2" border>
          <el-descriptions-item label="姓名">{{ patientInfo.name }}</el-descriptions-item>
          <el-descriptions-item label="性别">{{ patientInfo.gender }}</el-descriptions-item>
          <el-descriptions-item label="年龄">{{ patientInfo.age }}岁</el-descriptions-item>
          <el-descriptions-item label="就诊时间">{{ formatDate(patientInfo.visitTime) }}</el-descriptions-item>
        </el-descriptions>
      </div>

      <!-- 四诊信息采集 -->
      <div class="diagnosis-section">
        <h3>四诊信息</h3>
        <el-tabs v-model="activeTab" type="card">
          <!-- 望诊 -->
          <el-tab-pane label="望诊" name="inspection">
            <el-checkbox-group v-model="diagnosisData.inspection">
              <el-checkbox v-for="item in inspectionOptions" :key="item.value" :label="item.value">
                {{ item.label }}
              </el-checkbox>
            </el-checkbox-group>
            <el-input
                v-model="diagnosisData.inspectionNotes"
                type="textarea"
                :rows="3"
                placeholder="其他望诊观察记录"
            />
          </el-tab-pane>

          <!-- 闻诊 -->
          <el-tab-pane label="闻诊" name="listening">
            <el-checkbox-group v-model="diagnosisData.listening">
              <el-checkbox v-for="item in listeningOptions" :key="item.value" :label="item.value">
                {{ item.label }}
              </el-checkbox>
            </el-checkbox-group>
            <el-input
                v-model="diagnosisData.listeningNotes"
                type="textarea"
                :rows="3"
                placeholder="其他闻诊观察记录"
            />
          </el-tab-pane>

          <!-- 问诊 -->
          <el-tab-pane label="问诊" name="inquiry">
            <el-form label-width="120px">
              <el-form-item label="主诉">
                <el-input v-model="diagnosisData.complaint" placeholder="患者主诉" />
              </el-form-item>
              <el-form-item label="现病史">
                <el-input
                    v-model="diagnosisData.presentIllness"
                    type="textarea"
                    :rows="3"
                    placeholder="现病史描述"
                />
              </el-form-item>
              <el-form-item label="十问歌">
                <el-checkbox-group v-model="diagnosisData.inquiry">
                  <el-row :gutter="20">
                    <el-col :span="8" v-for="item in inquiryOptions" :key="item.value">
                      <el-checkbox :label="item.value">{{ item.label }}</el-checkbox>
                    </el-col>
                  </el-row>
                </el-checkbox-group>
              </el-form-item>
            </el-form>
          </el-tab-pane>

          <!-- 切诊 -->
          <el-tab-pane label="切诊" name="palpation">
            <el-form label-width="120px">
              <el-form-item label="脉象">
                <el-select
                    v-model="diagnosisData.pulse"
                    multiple
                    filterable
                    placeholder="请选择脉象"
                >
                  <el-option
                      v-for="item in pulseOptions"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                  />
                </el-select>
              </el-form-item>
              <el-form-item label="脉象描述">
                <el-input
                    v-model="diagnosisData.pulseDescription"
                    type="textarea"
                    :rows="3"
                    placeholder="详细脉象描述"
                />
              </el-form-item>
            </el-form>
          </el-tab-pane>
        </el-tabs>
      </div>

      <!-- 辨证结论 -->
      <div class="conclusion-section">
        <h3>辨证结论</h3>
        <el-form label-width="120px">
          <el-form-item label="八纲辨证">
            <el-select v-model="diagnosisData.eightPrinciples" multiple placeholder="请选择">
              <el-option
                  v-for="item in eightPrinciplesOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="脏腑辨证">
            <el-select v-model="diagnosisData.zangfu" multiple placeholder="请选择">
              <el-option
                  v-for="item in zangfuOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="病机分析">
            <el-input
                v-model="diagnosisData.pathogenesis"
                type="textarea"
                :rows="4"
                placeholder="详细病机分析"
            />
          </el-form-item>
          <el-form-item label="诊断结论">
            <el-input
                v-model="diagnosisData.conclusion"
                type="textarea"
                :rows="3"
                placeholder="中医诊断结论"
            />
          </el-form-item>
        </el-form>
      </div>
    </div>

    <!-- 底部操作按钮 -->
    <div class="panel-footer">
      <el-button @click="$emit('back')">返回</el-button>
      <el-button type="primary" @click="saveDiagnosis" :loading="isSaving">保存诊断</el-button>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, computed } from 'vue'
import { ElMessage } from 'element-plus'

const props = defineProps({
  patientInfo: {
    type: Object,
    required: true,
    default: () => ({
      name: '',
      gender: '',
      age: '',
      visitTime: new Date()
    })
  }
})

const emit = defineEmits(['back', 'save'])

// 状态管理
const activeTab = ref('inspection')
const isSaving = ref(false)

// 诊断数据
const diagnosisData = reactive({
  inspection: [],
  inspectionNotes: '',
  listening: [],
  listeningNotes: '',
  complaint: '',
  presentIllness: '',
  inquiry: [],
  pulse: [],
  pulseDescription: '',
  eightPrinciples: [],
  zangfu: [],
  pathogenesis: '',
  conclusion: ''
})

// 选项数据
const inspectionOptions = [
  { value: 'shen', label: '神色' },
  { value: 'se', label: '面色' },
  { value: 'xing', label: '形体' },
  { value: 'tai', label: '姿态' },
  { value: 'she', label: '舌象' },
  { value: 'tan', label: '痰涎' },
  { value: 'bian', label: '大便' },
  { value: 'niao', label: '小便' }
]

const listeningOptions = [
  { value: 'sheng', label: '声音' },
  { value: 'yu', label: '语言' },
  { value: 'xi', label: '呼吸' },
  { value: 'ke', label: '咳嗽' },
  { value: 'ou', label: '呕吐' },
  { value: 'tan', label: '痰鸣' },
  { value: 'e', label: '呃逆' },
  { value: 'qi', label: '嗳气' }
]

const inquiryOptions = [
  { value: 'han', label: '寒热' },
  { value: 'hanre', label: '汗' },
  { value: 'toutong', label: '头痛' },
  { value: 'shen', label: '身痛' },
  { value: 'er', label: '耳' },
  { value: 'kou', label: '口' },
  { value: 'xiong', label: '胸' },
  { value: 'shi', label: '食欲' },
  { value: 'ke', label: '渴' },
  { value: 'bian', label: '便' }
]

const pulseOptions = [
  { value: 'fu', label: '浮脉' },
  { value: 'chen', label: '沉脉' },
  { value: 'chi', label: '迟脉' },
  { value: 'shu', label: '数脉' },
  { value: 'hua', label: '滑脉' },
  { value: 'se', label: '涩脉' },
  { value: 'xian', label: '弦脉' },
  { value: 'ru', label: '濡脉' },
  { value: 'hong', label: '洪脉' },
  { value: 'xi', label: '细脉' }
]

const eightPrinciplesOptions = [
  { value: 'biao', label: '表证' },
  { value: 'li', label: '里证' },
  { value: 'han', label: '寒证' },
  { value: 're', label: '热证' },
  { value: 'xu', label: '虚证' },
  { value: 'shi', label: '实证' },
  { value: 'yin', label: '阴证' },
  { value: 'yang', label: '阳证' }
]

const zangfuOptions = [
  { value: 'xin', label: '心' },
  { value: 'gan', label: '肝' },
  { value: 'pi', label: '脾' },
  { value: 'fei', label: '肺' },
  { value: 'shen', label: '肾' },
  { value: 'dan', label: '胆' },
  { value: 'wei', label: '胃' },
  { value: 'dachang', label: '大肠' },
  { value: 'xiaochang', label: '小肠' },
  { value: 'pangguang', label: '膀胱' }
]

// 格式化日期
const formatDate = (date) => {
  return new Date(date).toLocaleString()
}

// 保存诊断
const saveDiagnosis = async () => {
  isSaving.value = true
  try {
    // 这里添加保存逻辑，通常是API调用
    // await saveTcmDiagnosisAPI(diagnosisData)
    ElMessage.success('中医诊断保存成功')
    emit('save', diagnosisData)
  } catch (error) {
    ElMessage.error('保存失败: ' + error.message)
  } finally {
    isSaving.value = false
  }
}
</script>

<style scoped>
.tcm-diagnosis-panel {
  display: flex;
  flex-direction: column;
  height: 100%;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  padding: 20px;
}

.panel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding-bottom: 15px;
  border-bottom: 1px solid #ebeef5;
}

.panel-content {
  flex: 1;
  overflow-y: auto;
  padding-right: 10px;
}

.patient-info-section,
.diagnosis-section,
.conclusion-section {
  margin-bottom: 25px;
}

.diagnosis-section :deep(.el-tabs__content) {
  padding: 15px;
  background-color: #f5f7fa;
  border-radius: 4px;
}

.panel-footer {
  display: flex;
  justify-content: flex-end;
  padding-top: 15px;
  border-top: 1px solid #ebeef5;
  margin-top: 20px;
}

.el-checkbox-group {
  margin-bottom: 15px;
}

.el-checkbox {
  margin-right: 15px;
  margin-bottom: 10px;
}

.el-textarea,
.el-select {
  width: 100%;
}
</style>
